<script setup lang="ts">
import gsap from 'gsap'
import HeroCarousel from '~/components/HeroCarousel.vue'
import NewsSection from '~/components/NewsSection.vue'

const box1 = ref(null)

onMounted(() => {
  gsap.from('.box1', {
    scrollTrigger: {
      trigger: '.box1',
      start: 'top 80%', // 元素顶部到视口 80% 位置开始
      toggleActions: 'play none none none',
    },
    opacity: 0,
    y: 50,
    duration: 1,
  })
})
</script>

<template>
  <div>
    <!-- Hero Section with Carousel -->
    <section class="h-screen relative overflow-hidden">
      <HeroCarousel />
      <div class="bg-black/40 flex items-center inset-0 justify-center absolute">
        <div class="text-white text-center z-10">
          <h1 class="fade-in text-4xl font-bold mb-6 md:text-6xl">
            乘风破浪 扬帆远航
          </h1>
          <p class="fade-in text-xl mb-8 md:text-2xl" style="animation-delay: 0.2s">
            光伏设备智能制造领导者
          </p>
          <div class="fade-in space-x-4" style="animation-delay: 0.4s">
            <NuxtLink to="/products" class="btn-primary">
              产品中心
            </NuxtLink>
            <NuxtLink to="/about" class="btn-outline text-white border-white hover:text-gray-900 hover:bg-white">
              了解更多
            </NuxtLink>
          </div>
        </div>
      </div>
    </section>

    <!-- Products Overview -->
    <section class="section-padding bg-gray-50">
      <div ref="box1" class="box1 container-max">
        <div class="mb-16 text-center">
          <h2 class="text-4xl title-gradient font-bold mb-6">
            核心产品
          </h2>
          <p class="text-xl text-gray-600 mx-auto max-w-3xl">
            专注光伏设备整线解决方案，为企业打造科技新工厂，共促发展可持续
          </p>
        </div>

        <div class="gap-8 grid lg:grid-cols-3 md:grid-cols-2">
          <ProductCard
            title="整线设备"
            description="EVA整线设备配备，为企业打造科技新工厂"
            image="/images/equipment-1.jpg"
            features="['一站式方案', '兼容性强', '智能制造']"
          />
          <ProductCard
            title="串焊机系列"
            description="多主栅串焊机切栅升级，划焊联体设计"
            image="/images/equipment-2.jpg"
            features="['多兼容性', '模块化设计', '拓展功能']"
          />
          <ProductCard
            title="双组份边框涂胶"
            description="高生产效率、高易用性的涂胶专用控制系统"
            image="/images/equipment-3.jpg"
            features="['高效率', '易用性', '智能控制']"
          />
        </div>
      </div>
    </section>

    <!-- Company Stats -->
    <section class="text-white section-padding bg-blue-600">
      <div class="container-max">
        <div class="text-center gap-8 grid md:grid-cols-4">
          <div class="fade-in">
            <div class="text-4xl font-bold mb-2">
              10000+
            </div>
            <div class="text-blue-200">
              备品备件品种
            </div>
          </div>
          <div class="fade-in" style="animation-delay: 0.1s">
            <div class="text-4xl font-bold mb-2">
              3.5亿
            </div>
            <div class="text-blue-200">
              2024年销售额
            </div>
          </div>
          <div class="fade-in" style="animation-delay: 0.2s">
            <div class="text-4xl font-bold mb-2">
              1384万
            </div>
            <div class="text-blue-200">
              2025年半年度营收
            </div>
          </div>
          <div class="fade-in" style="animation-delay: 0.3s">
            <div class="text-4xl font-bold mb-2">
              24小时
            </div>
            <div class="text-blue-200">
              技术对接服务
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- News Section -->
    <NewsSection />
  </div>
</template>
